<template>
  <van-nav-bar title="地址管理" left-arrow @click-left="goMy" />

  <!-- 分页 -->
  <div v-for="item in currentPageData" :key="item.id">
    <div class="myStyle">
      <!-- 大盒子 -->
      <div class="bigDiv">
        <!-- 左边盒子 -->
        <div class="leftDiv">
          <!-- 商品图片 -->
          <div class="myPicUrl"></div>
        </div>

        <!-- 右边盒子 -->
        <div class="rightDiv" @click="getAddressInfo(item.id)">
          <!-- 名字 电话 -->
          <div class="myNameAndTel">
            {{ item.name }}
            {{ item.tel }}
            <!-- 默认地址 -->
            <button class="myDefalut" v-if="item.isDefault">默认</button>
          </div>
          <!-- 地址 -->
          <div class="myAddress">
            {{ item.province }}
            {{ item.city }}
            {{ item.county }}
            {{ item.addressDetail }}
          </div>
        </div>
        <div class="myDelete">
          <img src="../assets/images/删除.png" @click="myDelete(item.id)" />
        </div>

        <div class="myEdit">
          <img src="../assets/images/编辑.png" @click="myEdit(item)" />
        </div>
      </div>
    </div>
  </div>
  <div class="btnPaging">
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <!-- 页数 -->
    <span>第{{ currentPage }}页/总{{
      Math.ceil(this.list.length / this.pageSize)
    }}页</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">
      下一页
    </button>
  </div>
  <div class="addAddress" @click="goAddress()">新增地址</div>
</template>

<script>
import { service } from "../api/config";
import { showToast } from "vant";
export default {
  name: "address",
  data() {
    return {
      id: "",
      list: [],
      //数据显示
      isShow: true,
      addressInfo: "",
      //第几页
      currentPage: 1,
      //一次展示多少条数据
      pageSize: 5,
    };
  },
  computed: {
    totalPages() {
      //整数取整
      return Math.ceil(this.list.length / this.pageSize);
    },
    //展示页面数据
    currentPageData() {
      //开始
      const startIndex = (this.currentPage - 1) * this.pageSize;
      //结束
      const endIndex = startIndex + this.pageSize;
      return this.list.slice(startIndex, endIndex);
    },
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
      console.log("上一页");
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
      console.log("下一页");
    },
    goMy() {
      if (this.$store.state.states == 0) {
        this.$router.push("/my");
      } else {
        this.$router.go(-1)
      }
    },
    goAddress() {
      this.$router.push("/addressEdit");
    },
    //获取地址信息
    getAddressInfo(id) {
      if (this.$store.state.states != 0) {
        const res = this.list.filter((item) => {
          return item.id == id;
        });
        this.$store.commit("setValue", {
          key: "address",
          value: JSON.stringify(res),
        });
        this.$router.push("/OrderConfirm")
      }
    },
    //删除
    myDelete(id) {
      service
        .post("/wx/address/delete", {
          id: id,
        })
        .then((res) => {
          console.log(res);
          showToast("删除成功");
          //删除成功后页面刷新
          setTimeout(() => {
            //刷新页面
            window.location.reload();
          }, 500);
        });
    },
    //编辑
    myEdit(item) {
      this.$router.push(
        "addressEditChirld",
        localStorage.setItem("Info", JSON.stringify(item))
      );
      // console.log(item);
    },
  },
  mounted() {
    service.get("/wx/address/list").then((res) => {
      if (res.data.errmsg == "成功") {
        if (res.data.data.list.length == 0) {
          this.isShow = false;
        } else {
          res.data.data.list.forEach((item) => {
            this.list.push({
              id: item.id,
              name: item.name,
              tel: item.tel,
              areaCode: item.areaCode,
              isDefault: item.isDefault,
              province: item.province,
              city: item.city,
              county: item.county,
              addressDetail: item.addressDetail,
            });
            if (item.isDefault == 1) {
              this.id = item.id;
            }
          });
        }
      }
    });
  },
};
</script>

<style scoped>
html {
  font-size: 0.2666vw;
}

.myStyle {
  padding-left: 1%;
  color: rgb(137, 141, 137);
  background-color: rgb(255, 255, 255, 0.7);
  border: 0.1rem solid rgb(236, 233, 230);
  padding-top: 3%;
  padding-bottom: 3%;
}

.bigDiv {
  display: flex;
}

.leftDiv {
  flex: 15%;
  /*两个div同一列占比 */
}

.rightDiv {
  flex: 85%;
  /*两个div同一列占比 */
  padding-top: 1.1rem;
}

.myPicUrl>img {
  width: 10rem;
  height: 10rem;
  line-height: 10rem;
}

.myNameAndTel {
  color: rgb(165, 165, 165);
  font-size: 20rem;
}

.myAddress {
  margin-top: 10rem;
  color: rgb(82, 82, 82);
  font-size: 16rem;
}

.myDelete>img {
  width: 25rem;
  height: 25rem;
  margin-top: 2rem;
}

.myEdit>img {
  width: 25rem;
  height: 25rem;
  margin-top: 28rem;
  margin-left: -25rem;
}

.addAddress {
  width: 100%;
  text-align: center;
  font-size: 25rem;
  background-color: rgba(86, 126, 218, 0.8);
  border-radius: 50rem;
}

.myDefalut {
  border: none;
  background-color: rgb(99, 103, 190);
  border-radius: 35rem;
  font-size: 0.8rem;
  color: white;
}

.btnPaging {
  width: 100%;
  text-align: center;
  font-size: 10rem;
  margin-top: 10rem;
}
</style>